Sélecteurs, spécificité et cascade

CSS approfondi

DSP - USAL33

Rappel : sélecteurs de base

Sélecteur Cible Exemple
Type Toutes les balises d'un type p { }
Classe Éléments avec une classe .important { }
ID Élément avec un ID unique #header { }
Universel Tous les éléments * { }

Classes : réutilisables, préférées pour le style. IDs : uniques, réservés JS/ancres.

Sélecteurs de combinaison

Sélecteur Nom Cible
A B Descendant Tous les B dans A
A > B Enfant direct B enfant immédiat de A
A + B Voisin adjacent B juste après A
A ~ B Voisins généraux Tous les B après A 
article p { line-height: 1.6; }
ul > li { list-style: disc; }
h1 + p { font-size: 1.2em; }

Pseudo-classes — interaction

Pseudo-classe Cible Exemple
:hover Survol a:hover { color: red; }
:focus Focus input:focus { ... }
:active Clic button:active { ... }

:focus est essentiel pour l'accessibilité au clavier.

Pseudo-classes — structure

Pseudo-classe Cible
:first-child Premier enfant
:last-child Dernier enfant
:nth-child(n) n-ième enfant 
tr:nth-child(odd)  { background: white; }
tr:nth-child(even) { background: #f5f5f5; }

Usage typique : zébrage de tableaux.

Pseudo-éléments

Pseudo-élément Cible
::before Contenu inséré avant
::after Contenu inséré après
::first-line Première ligne
::first-letter Première lettre 
a[href^="http"]::after { content: " 🔗"; }

⚠️ ::before / ::after nécessitent content

Sélecteurs d'attributs

Sélecteur Cible
[attr] Possède l'attribut
[attr="x"] Valeur exacte
[attr^="x"] Commence par
[attr$="x"] Finit par
[attr*="x"] Contient 
a[href^="http"]   { color: blue; }
a[href$=".pdf"]::after { content: " 📄"; }
input[required]   { border-left: 3px solid red; }

Spécificité CSS

Type Valeur
Éléments, pseudo-éléments 1
Classes, attributs, pseudo-classes 10
IDs 100
Styles inline 1000
!important ∞ 
p { }                  /* 1 */
.intro p { }           /* 11 */
#content .intro p { }  /* 111 → gagne */

⚠️ Évitez !important

La cascade CSS

Ordre de priorité quand plusieurs règles ciblent un élément :

  1. Importance (!important)
  2. Spécificité (ID > classe > élément)
  3. Ordre d'apparition (la dernière gagne)
p { color: blue; }
p { color: red; }   /* ← gagne */